<template>
	<v-dialog v-model="visible" width="800px">
		<v-card>
			<v-card-text>
				<div class="pt-5">{{ modText }}板块</div>
			</v-card-text>
			<v-card-text>
				<v-form @submit.prevent.stop="onSave" ref="form">
					<v-row>
						<v-col sm="6">
							<md-upload-image label="图标" v-model="form.icon" :rules="rules.icon"/>
						</v-col>
						<v-col sm="6">
							<md-upload-image label="Banner" v-model="form.banner" :rules="rules.banner" width="160px" height="100px"/>
						</v-col>
						<v-col sm="6">
							<v-text-field label="板块名称" v-model="form.name" :rules="rules.name"/>
						</v-col>
						<v-col sm="6">
							<v-text-field label="说明" v-model="form.description"/>
						</v-col>
						<v-col sm="6">
							<md-user-selector label="版主" v-model="form.moderatorId"/>
						</v-col>
						<v-col sm="6">
							<div class="d-flex flex-row">
								<v-switch label="是否启用" v-model="form.isEnabled" class="mr-2"></v-switch>
								<v-switch label="是否角色控制" v-model="form.isRoleAccess"></v-switch>
							</div>
						</v-col>
						<v-col sm="6">
							<md-role-selector label="可以访问的角色" v-model="form.rolesIds" :disabled="!form.isRoleAccess"/>
						</v-col>
						<v-col sm="6">
							<v-text-field label="排序" v-model.number="form.sortId"/>
						</v-col>
					</v-row>
				</v-form>
			</v-card-text>
			<v-card-actions class="justify-end">
				<v-btn @click="visible = false">取消</v-btn>
				<v-btn color="success" :loading="confirmLoading" @click="onSave">确认</v-btn>
			</v-card-actions>
		</v-card>
	</v-dialog>
</template>

<script>
import MdDialogMixins from '@/common/mixins/MdDialogMixins';
import MdUploadImage from '@/components/widget/MdUploadImage';
import MdUserSelector from '@/components/selector/MdUserSelector';
import MdRoleSelector from '@/components/selector/MdRoleSelector';
import CategoryApi from '@/common/api/CategoryApi';

export default {
	name: 'CategoryDialog',
	components: {MdRoleSelector, MdUserSelector, MdUploadImage},
	mixins: [MdDialogMixins],
	data() {
		return {
			visible: false,
			rules: {
				icon: this.$utils.formValidator(['required', 'string', 'max:64', 'min:2']),
				name: this.$utils.formValidator(['required', 'string', 'max:64', 'min:2'])
			}
		}
	},
	methods: {
		onSave() {
			if (!this.$refs.form.validate()) {
				return;
			}
			this.confirmLoading = true;
			let api = this.form.id ? CategoryApi.update(this.form.id, this.form) : CategoryApi.create(this.form);
			api.then(res => {
				this.$utils.responseHandler(res, true, true).then(() => {
					this.$emit('success');
					this.visible = false;
				})
			}).finally(() => this.confirmLoading = false);
		},
		add() {
			this.action({}, 'add')
		},
		edit(data) {
			this.action(data, 'add')
		}
	}
}
</script>

<style scoped>

</style>